<template>
	<view>
		<view class="top">
			<image src="https://qiniushelves.jiachuangnet.com/renovation/img/V1702111742374222861.png" class='bg'>
			</image>
			<u-navbar title='管理店铺' leftIconColor="#ffffff"
				:titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#ffffff'}" bgColor="transparent"
				:auto-back="true"></u-navbar>
		</view>
		<view class="workerSearch" style="">
			<image style="width: 34rpx;height: 34rpx;"
				src="https://renovationcdn.jiachuangnet.com/index/workerIndex/search.png"></image>
			<u-input @blur='blurSearch' placeholder="请输入您想搜索的内容" style="height: 78rpx;" v-model="keyword"></u-input>
		</view>
		<view class="statusTab">
			<view v-for="(item,index) in status" @click="changeStyle(item,index)" :class="{active:currentIndex==index}">
				{{item.name}}<text class="num" v-if="item.num>0">{{item.num}}</text>
			</view>
		</view>
		<view class="storeCard" style="padding-bottom: 100rpx">
			<view class="card" v-for="item in constractData">
				<view class="time" style="display: flex;justify-content: space-between;">
					<text>{{item.createTime}}</text>
					<text style="color: #D90011;" v-if="item.status==2">待合同上传</text>
					<text style="color: #6C76CC;" v-if="item.status==3">待合同付款</text>
					<text style="color: #6C76CC;" v-if="item.status==4">部分付款</text>
					<text style="color: #6C76CC;" v-if="item.status==5">待开工</text>
					<text style="color: #6C76CC;" v-if="item.status==6">进行中 {{item.percent}}</text>
					<text style="color: #6C76CC;" v-if="item.status==7">已逾期</text>
					<text style="color: #6C76CC;" v-if="item.status==8">已完成 {{item.confirmTime||""}}</text>
					<text style="color: #6C76CC;" v-if="item.status==9">已验收</text>
				</view>

				<view class="content">
					<view style="position: relative;">
						<image :src="item.storeImg" v-if="item.storeImg"
							style="width: 240rpx;height: 270rpx;border-radius: 20rpx;margin-left: 30rpx;"></image>
						<image v-else src="https://renovationcdn.jiachuangnet.com/index/workerIndex/shop.png"
							style="width:210rpx;height: 220rpx;"></image>
						<view class="stateTag1" v-if="item.brandPartyId==1&&item.storeType==1">
							<text>普通店</text>
						</view>
						<view class="stateTag2" v-if="item.brandPartyId==2&&item.storeType==1">
							<text>加盟店</text>
						</view>
						<view class="stateTag3" v-if="item.storeType==2">
							<text>旗舰店</text>
						</view>
					</view>
					<!-- <image 
						src="https://qiniushelves.jiachuangnet.com/renovation/img/V9555131742375780945.jpg"></image> -->
					<view class="info">
						<text>{{'【'+item.assignName+'】'}}</text>
						<text class="tips">装修订单</text>
						<!-- <view class="p" style="display: flex;justify-content: space-between;"><text
								style="font-size: 28rpx;">{{'￥'+(item.contractMoney||"无")}}</text><text
								style="font-size: 28rpx; color: #13989a; border-bottom: 1px solid #13989a;"
								v-if="item.status!=2" @click.stop="lookSign(item.inputImg||item.signedContractUrl)">查看合同</text>
						</view> -->
						<!-- <view class="alPay" style="color: #13989a;font-size: 20rpx;" v-if="item.contractPayMoney">
							[已付￥{{item.contractPayMoney}}]
						</view> -->
						<view class="cameraBox">
							<text v-if="item.serialNumber" :key="cameraIndex"
								@click.stop="viewVideoFn(cameraUrl,item.assignName,cameraIndex+1)"
								v-for="(cameraUrl,cameraIndex) in item.serialNumber"
								style="height: 100%; margin-left: 10rpx;font-size: 24rpx;color: #13989a;text-decoration: underline;">摄像头{{cameraIndex+1}}</text>
							<!-- <text v-if="!item.serialNumber" style="height: 100%; margin-left: 10rpx;font-size: 24rpx;color: #13989a">-</text> -->
						</view>
						<view class="buttom">
							<!-- 			<text style="border: 1px solid gainsboro; color: #333333;margin-right: 20rpx;">取消订单</text> -->
							<!-- <text style="background-color: #D90011;color: aliceblue;" @click.stop="toPay(item)"
								v-if="item.status==3">去支付</text> -->
							<!-- <text style="background-color: #13989a;color: aliceblue;"
								@click.stop="signContract(item.inputImg,item.assignTaskId,item.imgUrl,item.contractId)"
								v-if="!item.signedContractUrl">签订合同</text> -->
							<text style="background-color: #eb6649;color: aliceblue;" v-if="item.notSignedCount!=0"
								@click.stop="toPathB(`/concractList/index?assignTaskId=${item.assignTaskId}&status=${item.status}`)">签订合同</text>
							<!-- <text style="background-color: #D90011;color: aliceblue;" @click.stop="toPay(item)"
								v-if="item.status==4&&item.contractPayStatus==1">继续支付</text> -->
							<text style="background-color: #13989a;color: aliceblue;" @click.stop="getProcess(item)"
								v-if="[5,6,7,8].includes(item.status)">查看</text>
							<text style="background-color: #ee9900;color: aliceblue;" @click="toAfterSale(item)"
								v-if=" [9].includes(item.status)">售后</text>
						</view>
					</view>
				</view>

			</view>
			<view style="margin-top: 200rpx;" v-if='!constractData.length'>
				<u-empty mode="data" textColor="DarkGray">
				</u-empty>
			</view>
		</view>
		<u-popup :show="viewVideoShow" @close="viewVideoClose" round="10" mode="center">
			<view class="viewVideo">
				<view style="text-align: center;" v-if="currentSerialMsg&&currentSerialMsg.storeName">
					{{currentSerialMsg.storeName}}
				</view>
				<view class="viewVideo_v">
					<view style="width: 100%;height: 100%;" v-if="!videoSrc||videoStatus==-1">
						<u-empty icon="https://renovationcdn.jiachuangnet.com/shipin.png"
							style="width: 100%;height: 100%;" :text="textVideo">
						</u-empty>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<video v-if="videoSrc&&videoStatus==1&&viewVideoShow" id="myVideo"
						style="width: 100%;height: 450rpx;border-radius:20rpx;" object-fit='cover' :src='videoSrc'
						:autoplay='true' loop="true" poster></video>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<!-- src='https://assets.mixkit.co/video-templates/41/mixkit-41-360.mp4' -->
					<rayVideo v-if="videoSrc&&videoStatus==1&&viewVideoShow" style="width: 100%;height: 450rpx"
						:src='videoSrc'></rayVideo>
					<!-- <view style="height: 450rpx;width: 100%;" v-html="video"></view>
					-->
					<!-- #endif -->
				</view>
				<view class="video_msg" style="margin-bottom: 20rpx;" v-if="currentSerialMsg">
					<view v-if="currentSerialMsg.videoName">
						{{currentSerialMsg.videoName}}
					</view>
					<view v-if="currentSerialMsg.videoName">
						序列号：{{currentSerialMsg.serialNumber}}
					</view>
					<view>
						状态：{{videoStatus==1?'在线':'不在线'}}
					</view>
				</view>
				<u-button color="#13989a" text="关闭" @click="viewVideoClose"></u-button>
			</view>

		</u-popup>
		<newTabbar v-if="tabbarShow" style="position: fixed;top:0;bottom:0;z-index:10000000" :index='1'
			:tabbarList="tabbarList"></newTabbar>
		<u-popup :show="afterSaleShow" @close="closeAfter" round="10" mode="bottom">
			<view class="overdueForm">
				<view class="overdueForm_title">
					<view>申请售后</view>
				</view>
				<text style="color: #cb2d01;padding-right: 5rpx;">*</text><text>上传图片:</text>
				<view style="width: 100%;height: 20rpx;"></view>
				<upload v-if="afterSaleShow" name="afterSale" @uploadFile="afterSaleImg"></upload>
				<view style="border:1rpx solid #eee;box-sizing: border-box;margin:30rpx 0;">
					<u-textarea v-model='problemDescription' placeholder="问题描述"></u-textarea>

				</view>
				<view style="margin-bottom: 50px;">
					<u-button shape="circle" :color='color' @click="addAssignTaskAfter">提交</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import rayVideo from '@/components/rayVideo/index.vue'
	import newTabbar from '@/components/newTabbar/index.vue';
	let app = getApp()
	export default {
		components: {
			newTabbar,
			rayVideo
		},
		data() {
			return {
				videoSrc: '',
				problemDescription: '',
				videoStatus: 0,
				viewVideoShow: false,
				afterSaleShow: false,
				currentSerialMsg: null,
				keyword: "",
				afterId: "",
				textVideo: "",
				tabbarShow: false,
				constractData: [],
				color: app.globalData.defaultColor,
				afterSaleImgList: [],
				franchiseeListCount: {},
				status: [{
					num: "",
					name: '全部',
					orderStatus: ""
				}, {
					num: "",
					name: '待付款',
					orderStatus: 1
				}, {
					num: "",
					name: '待开始',
					orderStatus: 2
				}, {
					num: "",
					name: '进行中',
					orderStatus: 3,
				}, {
					num: "",
					name: '待评价',
					orderStatus: 4
				}],
				currentIndex: 0,
				tabbarList: [{
						'text': '首页',
						'path': 'settled',
						'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/indexed.png',
						'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/index.png',
						'name': '首页'
					},
					{
						'text': '我的',
						'path': 'mine',
						'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mined.png',
						'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mine.png',
						'name': '我的'
					}
				],
			}
		},
		onShow() {
			this.currentIndex = 0
			this.orderStatus = ""
			this.getData()
			this.getFinaceList();
			const worker = {
				'text': '人才库',
				'path': 'talentPool',
				'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/worked.png',
				'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/worker.png',
				'name': '人才库'
			}
			const shop = {
				'text': '店铺管理',
				'path': 'manageStore',
				'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankonged.png',
				'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankong.png',
				'name': '店铺管理'
			}
			const shopmanager = {
				'text': '店铺管理',
				'path': 'storeManage',
				'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankonged.png',
				'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankong.png',
				'name': '店铺管理'
			}
			uni.getStorage({
				key: 'loginType',
				success: (res) => {

					const loginType = res.data;
					if (loginType === 0 || loginType === 2 || loginType === 7) {
						// 超管 监理 品排方
						this.tabbarList.splice(1, 0, shop);
						this.tabbarList.splice(2, 0, worker);
					}
					if (loginType === 1) {
						// 装修公司管理员
						this.tabbarList.splice(1, 0, worker);
					}
					if (loginType === 4) {
						//  加盟商
						this.tabbarList.splice(1, 0, shopmanager);
					}
					if (loginType === 3) {
						// 4项目经理
						this.tabbarList.splice(1, 0, worker);
					}
					this.tabbarShow = true;
				}
			})

		},
		onHide() {

			this.tabbarList = [{
					'text': '首页',
					'path': 'settled',
					'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/indexed.png',
					'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/index.png',
					'name': '首页'
				},
				{
					'text': '我的',
					'path': 'mine',
					'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mined.png',
					'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mine.png',
					'name': '我的'
				}
			]

		},
		onUnload() {
			// this.tabbarList = this.$options.data(this).tabbarList;

			this.tabbarList = [{
					'text': '首页',
					'path': 'settled',
					'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/indexed.png',
					'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/index.png',
					'name': '首页'
				},
				{
					'text': '我的',
					'path': 'mine',
					'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mined.png',
					'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mine.png',
					'name': '我的'
				}
			]

		},
		methods: {
			addAssignTaskAfter() {
				if (this.afterSaleImgList.length == 0) return uni.$u.toast('请上传图片')
				if (this.problemDescription == '') return uni.$u.toast('请描述问题')
				const data = {
					afterProblem: this.problemDescription,
					afterProblemImg: this.afterSaleImgList,
					assignTaskId: this.afterId
				}
				uni.$u.http.post('/after/addAssignTaskAfter', data).then(res => {
					if (res == 1) {
						uni.$u.toast('提交成功！')
						this.afterSaleShow = false
					}
				})
			},
			closeAfter() {
				this.afterSaleShow = false
			},
			afterSaleImg(msg) {
				this.afterSaleImgList = msg.files
			},
			toPathB(url) {
				uni.navigateTo({
					url: `/packageB/pages${url}`
				})
			},
			stopVideo() {
				const video = uni.createVideoContext("myVideo", this);
				if (video) {
					video.pause(); // 暂停视频
					video.stop(); // 停止播放
				}
			},
			viewVideoFn(serialNumber, storeName, videoName) {
				this.currentSerialMsg = {
					serialNumber,
					storeName,
					videoName: '摄像头' + videoName
				}
				this.viewVideoShow = true
				this.getVideoUrl()
			},
			getVideoUrl() {
				uni.$u.http.get('/firmCamera/getLiveAddress', {
					params: {
						serialNumber: this.currentSerialMsg.serialNumber,
					}
				}).then((res) => {
					if (res) {
						this.videoStatus = 1
						this.videoSrc = res
					} else {
						this.videoStatus = -1
						this.textVideo = '摄像头不在线!'
					}
				})
			},
			viewVideoClose() {
				this.viewVideoShow = false
				this.videoStatus = 0
				this.videoSrc = ''
				this.currentSerialMsg = {}
				this.stopVideo()
			},
			blurSearch() {
				console.log(this.keyword, "keyword");
				this.getData()
				this.getFinaceList()
			},
			getFinaceList() {
				uni.$u.http.get('/franchisee/getFranchiseeListCount', {
					params: {
						assignName: this.keyword
					}
				}).then(res => {
					this.status[0].num = res.totalNum
					this.status[1].num = res.dueNum
					this.status[2].num = res.dueStartNum
					this.status[3].num = res.doingNum
					this.status[4].num = res.completedNum
				})
			},
			getData() {
				const data = {
					assignName: this.keyword,
					status: this.orderStatus
				}
				uni.$u.http.post('/contract/getFranchiseeList', data).then(res => {
					this.constractData = res
				})
			},
			changeStyle(item, index) {
				this.currentIndex = index
				this.orderStatus = item.orderStatus
				this.getData()
			},
			toPay(item) {
				if (!item.imgUrl || item.status == 2) {
					return
				}
				uni.navigateTo({
					url: `/pages/comfirmPay/index?constractId=${item.contractId}&status=${item.contractPayStatus}&signImg=${item.signedContractUrl}`
				})
			},
			getProcess(item) {
				uni.navigateTo({
					url: `/pages/taskAllocation/index?assignTaskId=${item.assignTaskId}&brandPartyId=${item.brandPartyId}`
				})
			},
			toAfterSale(item) {
				this.afterId = item.assignTaskId
				this.afterSaleShow = true
				this.afterSaleImgList = []
				this.problemDescription = ""
			},
			signContract(url, assignTaskId, imgUrl, contractId) {
				if (!imgUrl) {
					return uni.$u.toast('合同未上传');
				}
				uni.navigateTo({
					url: `/pages/contract/index?url=${url}&assignTaskId=${assignTaskId}&imgUrl=${imgUrl}&contractId=${contractId}`
				})
			},
			lookSign(url) {
				if (url) {
					uni.showLoading({
						title: '合同下载中...'
					})
					uni.downloadFile({
						url: `https://${url}`,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.hideLoading();
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
								}
							});
						},
						fail: () => {
							console.log(res, "");
							uni.hideLoading();
							uni.$u.toast('合同下载失败,请联系管理员 :)');
						}
					});
				} else {
					uni.$u.toast('合同未上传');
				}

			},
		}
	}
</script>

<style lang="less" scoped>
	.cameraBox {
		// margin: 20rpx;
		display: flex;
		margin-top: 18rpx;
		flex-wrap: wrap;
		// position: absolute;
		// bottom: 10px;
		// left: 10px;
	}

	.viewVideo {
		width: 95vw;
		font-size: 28rpx;
		font-weight: 700;
		padding: 20rpx;
		box-sizing: border-box;

		.viewVideo_v {
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.bg {
		width: 750rpx;
		height: 350rpx;
		// position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 620rpx;
		height: 74rpx;
		background-color: white;
		opacity: 0.9;
		position: absolute;
		top: 175rpx;
		z-index: 100;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.statusTab {
		display: flex;
		justify-content: space-around;
		// background: #000;
		width: 750rpx;
		height: 70rpx;
		position: absolute;
		top: 270rpx;
		font-size: 28rpx;
		color: DimGray;
		align-items: center;

		view {
			display: flex;
		}
	}

	.num {
		display: block;
		width: 25rpx;
		font-size: 20rpx;
		color: #fff;
		height: 25rpx;
		line-height: 25rpx;
		background: #f56c6c;
		border-radius: 50%;
		text-align: center;
	}

	.active {
		color: #000;
		font-size: 25rpx;
		font-weight: 600;
	}

	.stateTag1 {
		position: absolute;
		top: 0;
		left: 30rpx;
		background-color: #4d90fe;
		color: white;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
		border-bottom-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.stateTag3 {
		position: absolute;
		top: 0;
		left: 30rpx;
		background-color: #80c342;
		color: white;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
		border-bottom-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.stateTag2 {
		position: absolute;
		top: 0;
		left: 30rpx;
		background-color: #ffc700;
		color: white;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
		border-bottom-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.storeCard {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.card {
			width: 700rpx;
			min-height: 350rpx;
			border: 1px solid gainsboro;
			margin-top: 20rpx;
			border-radius: 20rpx;

		}
	}

	.time {
		width: 600rpx;
		margin-left: 40rpx;
		justify-content: space-between;
		margin-top: 15rpx;

		text {
			font-size: 23rpx;
			display: block;
		}
	}

	.content {
		display: flex;
		margin-top: 20rpx;
		padding-bottom: 20rpx;

		.info {
			margin-left: 20rpx;
			width: 360rpx;

			text {
				display: block;
			}

			.p {
				display: flex;
				margin-top: 20rpx;
			}

			.tips {
				width: 110rpx;
				height: 45rpx;
				border-radius: 10rpx;
				background-color: #AEE5E2;
				font-size: 23rpx;
				color: #13989A;
				text-align: center;
				margin-left: 15rpx;
				margin-top: 15rpx;
				line-height: 45rpx;
			}

			.buttom {
				margin-top: 40rpx;
				display: flex;
				justify-content: flex-end;

				text {
					width: 160rpx;
					height: 65rpx;
					margin-left: 25rpx;
					border-radius: 20rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 65rpx;
				}
			}
		}
	}

	.overdueForm_title,
	.list_contruct_title {
		font-weight: 700;
		display: flex;
		justify-content: center;
	}

	.overdueForm {
		padding: 50rpx 15rpx;
		height: 80%;
	}
</style>